```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百万QPS防护实战指南 | Java与AI技术知识库</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }
        h1, h2, h3, h4, h5 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 700;
            color: #0f172a;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 100%);
        }
        .code-block {
            background-color: #1e293b;
            border-left: 4px solid #0ea5e9;
        }
        .section-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .section-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .highlight-text {
            position: relative;
            z-index: 1;
        }
        .highlight-text::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background-color: rgba(14, 165, 233, 0.2);
            z-index: -1;
            transform: skewY(-1deg);
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 0.8;
            margin: 0.15em 0.1em 0 0;
            font-weight: 700;
            color: #1e3a8a;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-6xl mx-auto text-center">
            <div class="inline-block mb-6 px-4 py-2 bg-white bg-opacity-20 rounded-full backdrop-filter backdrop-blur-sm">
                <span class="font-medium text-sm">技术小馆 - 架构实践</span>
            </div>
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                百万级<span class="highlight-text">QPS防护</span>实战指南
            </h1>
            <p class="text-xl md:text-2xl max-w-3xl mx-auto opacity-90 mb-8">
                从崩溃边缘到从容应对：构建抗百万并发的高可用系统架构
            </p>
            <div class="flex flex-wrap justify-center gap-4 mt-10">
                <div class="flex items-center px-4 py-2 bg-white bg-opacity-10 rounded-lg">
                    <i class="fas fa-shield-alt mr-2"></i>
                    <span>7大防护层级</span>
                </div>
                <div class="flex items-center px-4 py-2 bg-white bg-opacity-10 rounded-lg">
                    <i class="fas fa-bolt mr-2"></i>
                    <span>13种实战技术</span>
                </div>
                <div class="flex items-center px-4 py-2 bg-white bg-opacity-10 rounded-lg">
                    <i class="fas fa-code mr-2"></i>
                    <span>9个代码示例</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Content Container -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Intro Section -->
        <div class="bg-white rounded-xl p-8 md:p-10 mb-12 section-card">
            <div class="flex flex-col md:flex-row gap-8">
                <div class="md:w-1/3">
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1749791922619-d36d88cc-4857-4844-b080-b4d2a1b3db14.png" alt="系统告警截图" class="w-full h-auto rounded-lg shadow-md">
                </div>
                <div class="md:w-2/3">
                    <p class="drop-cap text-lg md:text-xl text-slate-700 leading-relaxed">
                        凌晨三点，你的手机突然响起告警声，系统接口QPS暴增至百万级，服务器CPU使用率飙升至100%，响应时间从毫秒级飙升至秒级，用户投诉如雪片般涌来。这不是演习，而是真实发生在许多互联网公司的噩梦。无论是恶意攻击还是业务爆发，百万级QPS的冲击都能让脆弱的系统瞬间崩溃。作为经历过多次类似危机的架构师，我将分享那些在关键时刻真正起效的防护策略，帮你构建一个能够从容应对高并发冲击的强健系统。
                    </p>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- Table of Contents -->
            <div class="lg:col-span-1">
                <div class="sticky top-8 bg-white rounded-xl p-6 shadow-sm">
                    <h2 class="text-xl font-bold mb-4 text-slate-800 flex items-center">
                        <i class="fas fa-list-ul mr-2 text-blue-600"></i>
                        内容目录
                    </h2>
                    <ul class="space-y-3">
                        <li>
                            <a href="#section-1" class="flex items-center text-slate-600 hover:text-blue-600 transition-colors">
                                <i class="fas fa-angle-right mr-2 text-xs"></i>
                                <span>理解高并发攻击的本质</span>
                            </a>
                            <ul class="ml-6 mt-2 space-y-2">
                                <li><a href="#section-1-1" class="text-sm text-slate-500 hover:text-blue-500">常见高并发攻击类型分析</a></li>
                                <li><a href="#section-1-2" class="text-sm text-slate-500 hover:text-blue-500">攻击者的动机与手段</a></li>
                                <li><a href="#section-1-3" class="text-sm text-slate-500 hover:text-blue-500">合法流量与恶意流量的区别</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#section-2" class="flex items-center text-slate-600 hover:text-blue-600 transition-colors">
                                <i class="fas fa-angle-right mr-2 text-xs"></i>
                                <span>前端防护策略</span>
                            </a>
                        </li>
                        <li>
                            <a href="#section-3" class="flex items-center text-slate-600 hover:text-blue-600 transition-colors">
                                <i class="fas fa-angle-right mr-2 text-xs"></i>
                                <span>网关层防护措施</span>
                            </a>
                        </li>
                        <li>
                            <a href="#section-4" class="flex items-center text-slate-600 hover:text-blue-600 transition-colors">
                                <i class="fas fa-angle-right mr-2 text-xs"></i>
                                <span>应用层防护技术</span>
                            </a>
                        </li>
                        <li>
                            <a href="#section-5" class="flex items-center text-slate-600 hover:text-blue-600 transition-colors">
                                <i class="fas fa-angle-right mr-2 text-xs"></i>
                                <span>缓存与队列的合理应用</span>
                            </a>
                        </li>
                        <li>
                            <a href="#section-6" class="flex items-center text-slate-600 hover:text-blue-600 transition-colors">
                                <i class="fas fa-angle-right mr-2 text-xs"></i>
                                <span>数据库层防护策略</span>
                            </a>
                        </li>
                        <li>
                            <a href="#section-7" class="flex items-center text-slate-600 hover:text-blue-600 transition-colors">
                                <i class="fas fa-angle-right mr-2 text-xs"></i>
                                <span>应急响应与监控预警</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Content Sections -->
            <div class="lg:col-span-3 space-y-12">
                <!-- Section 1 -->
                <section id="section-1" class="bg-white rounded-xl p-8 section-card">
                    <div class="flex items-center mb-6">
                        <div class="w-2 h-10 bg-blue-600 rounded-full mr-4"></div>
                        <h2 class="text-2xl font-bold text-slate-800">一、理解高并发攻击的本质</h2>
                    </div>
                    
                    <div id="section-1-1" class="mb-8">
                        <h3 class="text-xl font-semibold mb-4 text-slate-700 flex items-center">
                            <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
                            1. 常见高并发攻击类型分析
                        </h3>
                        <div class="bg-slate-50 p-5 rounded-lg mb-4">
                            <p class="text-slate-700">
                                高并发攻击主要包括DDoS攻击、CC攻击和爬虫攻击等。DDoS通过大量请求耗尽系统资源，CC攻击则针对应用层，反复请求特定接口。我曾处理过一起电商平台遭遇的攻击，攻击者利用上万个代理IP对商品详情页发起请求，导致系统崩溃。
                            </p>
                        </div>
                        <div class="border-l-4 border-blue-200 pl-4 mb-4">
                            <p class="text-sm text-slate-500 italic">
                                <i class="fas fa-lightbulb text-blue-400 mr-2"></i>
                                实战建议：建立全面的攻击类型分类体系，针对不同类型的攻击制定差异化防护策略。
                            </p>
                        </div>
                    </div>
                    
                    <div id="section-1-2" class="mb-8">
                        <h3 class="text-xl font-semibold mb-4 text-slate-700 flex items-center">
                            <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
                            2. 攻击者的动机与手段
                        </h3>
                        <p class="text-slate-700 mb-4">
                            攻击动机多种多样：竞争对手恶意攻击、数据爬取、敲诈勒索等。攻击手段也在不断升级，从简单的脚本到复杂的分布式僵尸网络。在一个支付系统案例中，攻击者模拟正常用户行为，使用动态IP池绕过简单防护，目的是获取交易数据。
                        </p>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="bg-blue-50 p-4 rounded-lg">
                                <h4 class="font-medium text-blue-800 mb-2 flex items-center">
                                    <i class="fas fa-user-secret mr-2"></i>
                                    常见攻击动机
                                </h4>
                                <ul class="text-sm text-blue-700 space-y-1">
                                    <li class="flex items-start">
                                        <i class="fas fa-arrow-right text-blue-400 mt-1 mr-2 text-xs"></i>
                                        <span>商业竞争破坏</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-arrow-right text-blue-400 mt-1 mr-2 text-xs"></i>
                                        <span>数据窃取</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-arrow-right text-blue-400 mt-1 mr-2 text-xs"></i>
                                        <span>敲诈勒索</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-arrow-right text-blue-400 mt-1 mr-2 text-xs"></i>
                                        <span>恶意破坏</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="bg-amber-50 p-4 rounded-lg">
                                <h4 class="font-medium text-amber-800 mb-2 flex items-center">
                                    <i class="fas fa-tools mr-2"></i>
                                    常见攻击手段
                                </h4>
                                <ul class="text-sm text-amber-700 space-y-1">
                                    <li class="flex items-start">
                                        <i class="fas fa-arrow-right text-amber-400 mt-1 mr-2 text-xs"></i>
                                        <span>分布式拒绝服务(DDoS)</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-arrow-right text-amber-400 mt-1 mr-2 text-xs"></i>
                                        <span>应用层CC攻击</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-arrow-right text-amber-400 mt-1 mr-2 text-xs"></i>
                                        <span>高级持续性威胁(APT)</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-arrow-right text-amber-400 mt-1 mr-2 text-xs"></i>
                                        <span>爬虫攻击</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div id="section-1-3">
                        <h3 class="text-xl font-semibold mb-4 text-slate-700 flex items-center">
                            <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
                            3. 合法流量与恶意流量的区别
                        </h3>
                        <p class="text-slate-700 mb-4">
                            区分合法与恶意流量是防护的关键。合法流量通常有合理的访问频率、明确的业务目的和正常的行为模式。而恶意流量往往表现为异常的访问频率、不合理的访问路径和异常的数据请求模式。
                        </p>
                        <div class="overflow-x-auto">
                            <table class="min-w-full bg-white rounded-lg overflow-hidden">
                                <thead class="bg-slate-100">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">特征</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">合法流量</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">恶意流量</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-200">
                                    <tr>
                                        <td class="px-4 py-3 text-sm text-slate-700">访问频率</td>
                                        <td class="px-4 py-3 text-sm text-green-600">合理，符合用户行为</td>
                                        <td class="px-4 py-3 text-sm text-red-600">异常高频率</td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 text-sm text-slate-700">访问路径</td>
                                        <td class="px-4 py-3 text-sm text-green-600">遵循业务流程</td>
                                        <td class="px-4 py-3 text-sm text-red-600">无规律或针对特定接口</td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 text-sm text-slate-700">请求参数</td>
                                        <td class="px-4 py-3 text-sm text-green-600">格式正确，符合预期</td>
                                        <td class="px-4 py-3 text-sm text-red-600">异常参数或SQL注入特征</td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 text-sm text-slate-700">来源IP</td>
                                        <td class="px-4 py-3 text-sm text-green-600">地理位置合理</td>
                                        <td class="px-4 py-3 text-sm text-red-600">大量来自代理IP</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>

                <!-- Section 2 -->
                <section id="section-2" class="bg-white rounded-xl p-8 section-card">
                    <div class="flex items-center mb-6">
                        <div class="w-2 h-10 bg-blue-600 rounded-full mr-4"></div>
                        <h2 class="text-2xl font-bold text-slate-800">二、前端防护策略</h2>
                    </div>
                    
                    <div class="mb-8">
                        <h3 class="text-xl font-semibold mb-4 text-slate-700 flex items-center">
                            <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
                            1. 验证码与人机识别
                        </h3>
                        <p class="text-slate-700 mb-4">
                            验证码是拦截自动化攻击的第一道防线。现代验证码已经从简单的图形识别发展到行为分析、滑动验证等多种形式。
                        </p>
                        <div class="code-block rounded-lg overflow-hidden mb-4">
                            <div class="flex items-center bg-slate-800 px-4 py-2">
                                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                                <div class="text-slate-400 text-sm ml-2">slider-captcha.js</div>
                            </div>
                            <pre class="text-slate-200 p-4 overflow-x-auto"><code>// 前端滑动验证码实现示例
function initSliderCaptcha() {
    const slider = document.getElementById('slider');
    const track = document.getElementById('track');
    let startX = 0;
    let moveX = 0;
    
    slider.addEventListener('mousedown', function(e) {
        startX = e.clientX;
        document.addEventListener('mousemove', moveHandler);
        document.addEventListener('mouseup', upHandler);
    });
    
    function moveHandler(e) {
        moveX = e.clientX - startX;
        if(moveX < 0) moveX = 0;
        if(moveX > track.clientWidth - slider.clientWidth) 
            moveX = track.clientWidth - slider.clientWidth;
        slider.style.transform = `translateX(${moveX}px)`;
    }
    
    function upHandler() {
        document.removeEventListener('mousemove', moveHandler);
        document.removeEventListener('mouseup', upHandler);
        // 发送验证请求
        verifySlider(moveX);
    }
}</code></pre>
                        </div>
                    </div>
                    
                    <div class="mb-8">
                        <h3 class="text-xl font-semibold mb-4 text-slate-700 flex items-center">
                            <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
                            2. 客户端频率限制
                        </h3>
                        <p class="text-slate-700 mb-4">
                            在前端实现基本的频率控制可以减轻服务器压力。例如，防止用户快速多次点击提交按钮：
                        </p>
                        <div class="code-block rounded-lg overflow-hidden mb-4">
                            <div class="flex items-center bg-slate-800 px-4 py-2">
                                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                                <div class="text-slate-400 text-sm ml-2">debounce.js</div>
                            </div>
                            <pre class="text-slate-200 p-4 overflow-x-auto"><code>// 按钮防抖实现
function debounce(fn, delay) {
    let timer = null;
    return function() {
        if(timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
            timer = null;
        }, delay);
    }
}

// 使用防抖包装提交函数
const submitBtn = document.getElementById('submit');
const debouncedSubmit = debounce(function() {
    // 提交逻辑
    submitForm();
}, 300);

submitBtn.addEventListener('click', debouncedSubmit);</code></pre>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="bg-white border border-slate-200 rounded-lg p-5">
                            <h4 class="font-semibold text-lg mb-3 text-slate-700 flex items-center">
                                <i class="fas fa-lock text-blue-500 mr-2"></i>
                                前端加密与签名校验
                            </h4>
                            <p class="text-slate-600 text-sm mb-4">
                                对关键请求参数进行加密和签名，可以有效防止请求伪造。示例代码展示了如何生成请求签名并发送安全请求。
                            </p>
                            <div class="bg-slate-50 p-3 rounded text-xs font-mono text-slate-700 overflow-x-auto">
                                <span class="text-blue-500">function</span> generateSignature(params, timestamp, secretKey) {
                                    <br>&nbsp;&nbsp;<span class="text-blue-500">const</span> sortedKeys = Object.keys(params).sort();
                                    <br>&nbsp;&nbsp;<span class="text-blue-500">let</span> signStr = '';
                                    <br>&nbsp;&nbsp;<span class="text-blue-500">// 构建签名字符串...</span>
                                    <br>&nbsp;&nbsp;<span class="text-blue-500">return</span> md5(signStr);
                                <br>}
                            </div>
                        </div>
                        
                        <div class="bg-white border border-slate-200 rounded-lg p-5">
                            <h4 class="font-semibold text-lg mb-3 text-slate-700 flex items-center">
                                <i class="fas fa-robot text-blue-500 mr-2"></i>
                                JavaScript反爬虫技术
                            </h4>
                            <p class="text-slate-600 text-sm mb-4">
                                通过JavaScript混淆、动态生成DOM等技术增加爬虫的难度。示例展示了如何动态生成敏感内容而非直接暴露在HTML中。
                            </p>
                            <div class="bg-slate-50 p-3 rounded text-xs font-mono text-slate-700 overflow-x-auto">
                                <span class="text-blue-500">function</span> renderSensitiveContent() {
                                    <br>&nbsp;&nbsp;<span class="text-blue-500">const</span> priceValue = decrypt('加密的价格数据');
                                    <br>&nbsp;&nbsp;<span class="text-blue-500">const</span> canvas = document.createElement('canvas');
                                    <br>&nbsp;&nbsp;<span class="text-blue-500">const</span> ctx = canvas.getContext('2d');
                                    <br>&nbsp;&nbsp;ctx.fillText(`¥${priceValue}`, 10, 20);
                                <br>}
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Section 3 -->
                <section id="section-3" class="bg-white rounded-xl p-8 section-card">
                    <div class="flex items-center mb-6">
                        <div class="w-2 h-10 bg-blue-600 rounded-full mr-4"></div>
                        <h2 class="text-2xl font-bold text-slate-800">三、网关层防护措施</h2>
                    </div>
                    
                    <div class="mb-8">
                        <h3 class="text-xl font-semibold mb-4 text-slate-700 flex items-center">
                            <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
                            1. 基于IP的限流策略
                        </h3>
                        <p class="text-slate-700 mb-4">
                            在网关层实现IP限流是最基础的防护措施。Nginx配置示例展示了如何对API接口进行请求限流。
                        </p>
                        <div class="code-block rounded-lg overflow-hidden mb-4">
                            <div class="flex items-center bg-slate-800 px-4 py-2">
                                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                                <div class="text-slate-400 text-sm ml-2">nginx.conf</div>
                            </div>
                            <pre class="text-slate-200 p-4 overflow-x-auto"><code># Nginx限流配置
http {
    # 定义限流区域，使用$binary_remote_addr而不是$remote_addr以减少内存占用
    limit_req_zone $binary_remote_addr zone=req_zone:10m rate=10r/s;
    
    server {
        location /api/ {
            # 应用限流，burst=20允许短时间的突发请求，nodelay参数使得不延迟处理
            limit_req zone=req_zone burst=20 nodelay;
            
            # 其他配置
            proxy_pass http://backend;
        }
    }
}</code></pre>
                        </div>
                    </div>
                    
                    <div class="mb-8">
                        <h3 class="text-xl font-semibold mb-4 text-slate-700 flex items-center">
                            <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
                            2. WAF配置与自定义规则
                        </h3>
                        <p class="text-slate-700 mb-4">
                            Web应用防火墙(WAF)可以拦截各种Web攻击。ModSecurity规则示例展示了如何检测SQL注入攻击和管理IP黑名单。
                        </p>
                        <div class="code-block rounded-lg overflow-hidden mb-4">
                            <div class="flex items-center bg-slate-800 px-4 py-2">
                                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                                <div class="text-slate-400 text-sm ml-2">modsecurity.conf</div>
                            </div>
                            <pre class="text-slate-200 p-4 overflow-x-auto"><code># ModSecurity规则示例
# 检测并阻止SQL注入攻击
SecRule REQUEST_COOKIES|REQUEST_COOKIES_NAMES|REQUEST_FILENAME|REQUEST_HEADERS|REQUEST_HEADERS_NAMES|REQUEST_BODY|REQUEST_LINE|ARGS|ARGS_NAMES "(?i:(?:select\s+(?:[\w\s,.*]+)\s+from)|union\s+select|insert\s+into|update\s+set|delete\s+from)" \
    "id:1000,phase:2,t:none,t:urlDecodeUni,block,msg:'SQL Injection Attack'"

# 限制单个IP的请求频率
SecRule REMOTE_ADDR "@ipMatchFromFile /etc/modsecurity/blacklist.conf" \
    "id:1001,phase:1,deny,status:403,msg:'IP in blacklist'"</code></pre>
                        </div>
                    </div>
                </section>

                <!-- Section 4 -->
                <section id="section-4" class="bg-white rounded-xl p-8 section-card">
                    <div class="flex items-center mb-6">
                        <div class="w-2 h-10 bg-blue-600 rounded-full mr-4"></div>
                        <h2 class="text-2xl font-bold text-slate-800">四、应用层防护技术</h2>
                    </div>
                    
                    <div class="mb-8">
                        <h3 class="text-xl font-semibold mb-4 text-slate-700 flex items-center">
                            <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
                            1. 接口限流算法实现
                        </h3>
                        <p class="text-slate-700 mb-4">
                            常用限流算法包括固定窗口、滑动窗口、漏桶和令牌桶算法。Java实现示例展示了令牌桶算法的核心逻辑。
                        </p>
                        <div class="code-block rounded-lg overflow-hidden mb-4">
                            <div class="flex items-center bg-slate-800 px-4 py-2">
                                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                                <div class="text-slate-400 text-sm ml-2">TokenBucket.java</div>
                            </div>
                            <pre class="text-slate-200 p-4 overflow-x-auto"><code>public class TokenBucket {
    private final long capacity;  // 桶容量
    private final double refillRate;  // 令牌填充速率(个/秒)
    private double tokens;  // 当前令牌数
    private long lastRefillTime;  // 上次填充时间
    
    public TokenBucket(long capacity, double refillRate) {
        this.capacity = capacity;
        this.refillRate = refillRate;
        this.tokens = capacity;
        this.lastRefillTime = System.currentTimeMillis();
    }
    
    public synchronized boolean tryConsume(int requestedTokens) {
        refill();
        
        if (tokens < requestedTokens) {
            return false;  // 令牌不足，拒绝请求
        }
        
        tokens -= requestedTokens;
        return true;  // 获取令牌成功，允许请求
    }
    
    private void refill() {
        long now = System.currentTimeMillis();
        double tokenToAdd = (now - lastRefillTime) / 1000.0 * refillRate;
        tokens = Math.min(capacity, tokens + tokenToAdd);
        lastRefillTime = now;
    }
}</code></pre>
                        </div>
                    </div>
                </section>

                <!-- Section 5 -->
                <section id="section-5" class="bg-white rounded-xl p-8 section-card">
                    <div class="flex items-center mb-6">
                        <div class="w-2 h-10 bg-blue-600 rounded-full mr-4"></div>
                        <h2 class="text-2xl font-bold text-slate-800">五、缓存与队列的合理应用</h2>
                    </div>
                    
                    <div class="mb-8">
                        <h3 class="text-xl font-semibold mb-4 text-slate-700 flex items-center">
                            <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
                            1. 多级缓存架构设计
                        </h3>
                        <p class="text-slate-700 mb-4">
                            多级缓存可以有效减轻数据库压力。Java示例展示了如何实现本地缓存与Redis缓存的协同工作。
                        </p>
                        <div class="code-block rounded-lg overflow-hidden mb-4">
                            <div class="flex items-center bg-slate-800 px-4 py-2">
                                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                                <div class="text-slate-400 text-sm ml-2">MultiLevelCache.java</div>
                            </div>
                            <pre class="text-slate-200 p-4 overflow-x-auto"><code>// 多级缓存示例
public class MultiLevelCache {
    private Cache localCache;  // 本地缓存(如Caffeine)
    private RedisTemplate<String, Object> redisTemplate;  // 分布式缓存
    
    public Object get(String key) {
        // 先查本地缓存
        Object value = localCache.getIfPresent(key);
        if (value != null) {
            return value;
        }
        
        // 本地缓存未命中，查Redis
        value = redisTemplate.opsForValue().get(key);
        if (value != null) {
            // 回填本地缓存
            localCache.put(key, value);
            return value;
        }
        
        // Redis未命中，查数据库
        value = queryFromDatabase(key);
        if (value != null) {
            // 回填缓存
            localCache.put(key, value);
            redisTemplate.opsForValue().set(key, value, 30, TimeUnit.MINUTES);
        }
        
        return value;
    }
}</code></pre>
                        </div>
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <h4 class="font-medium text-blue-800 mb-2 flex items-center">
                                <i class="fas fa-lightbulb text-blue-500 mr-2"></i>
                                多级缓存架构要点
                            </h4>
                            <ul class="text-sm text-blue-700 space-y-2">
                                <li class="flex items-start">
                                    <span class="bg-blue-100 text-blue-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 flex-shrink-0">1</span>
                                    <span>本地缓存(如Caffeine)提供超低延迟访问，适合高频热点数据</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="bg-blue-100 text-blue-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 flex-shrink-0">2</span>
                                    <span>分布式缓存(如Redis)提供一致性和更大的存储容量</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="bg-blue-100 text-blue-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 flex-shrink-0">3</span>
                                    <span>缓存过期策略应根据数据特性设置不同TTL</span>
                                </li>
                                <li class="flex items-start">
                                    <span class="bg-blue-100 text-blue-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 flex-shrink-0">4</span>
                                    <span>考虑使用布隆过滤器避免缓存穿透问题</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </section>

                <!-- Section 6 -->
                <section id="section-6" class="bg-white rounded-xl p-8 section-card">
                    <div class="flex items-center mb-6">
                        <div class="w-2 h-10 bg-blue-600 rounded-full mr-4"></div>
                        <h2 class="text-2xl font-bold text-slate-800">六、数据库层防护策略</h2>
                    </div>
                    
                    <div class="mb-8">
                        <h3 class="text-xl font-semibold mb-4 text-slate-700 flex items-center">
                            <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
                            1. 读写分离与分库分表
                        </h3>
                        <p class="text-slate-700 mb-4">
                            使用读写分离减轻主库压力。MyBatis配置示例展示了如何实现动态数据源路由。
                        </p>
                        <div class="code-block rounded-lg overflow-hidden mb-4">
                            <div class="flex items-center bg-slate-800 px-4 py-2">
                                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                                <div class="text-slate-400 text-sm ml-2">DataSourceConfig.java</div>
                            </div>
                            <pre class="text-slate-200 p-4 overflow-x-auto"><code>// MyBatis配置读写分离
@Configuration
public class DataSourceConfig {
    @Bean
    @ConfigurationProperties("spring.datasource.master")
    public DataSource masterDataSource() {
        return DataSourceBuilder.create().build();
    }
    
    @Bean
    @ConfigurationProperties("spring.datasource.slave")
    public DataSource slaveDataSource() {
        return DataSourceBuilder.create().build();
    }
    
    @Bean
    public DataSource routingDataSource() {
        Map<Object, Object> targetDataSources = new HashMap<>();
        targetDataSources.put(DataSourceType.MASTER, masterDataSource());
        targetDataSources.put(DataSourceType.SLAVE, slaveDataSource());
        
        DynamicDataSource dataSource = new DynamicDataSource();
        dataSource.setTargetDataSources(targetDataSources);
        dataSource.setDefaultTargetDataSource(masterDataSource());
        return dataSource;
    }
}</code></pre>
                        </div>
                    </div>
                </section>

                <!-- Section 7 -->
                <section id="section-7" class="bg-white rounded-xl p-8 section-card">
                    <div class="flex items-center mb-6">
                        <div class="w-2 h-10 bg-blue-600 rounded-full mr-4"></div>
                        <h2 class="text-2xl font-bold text-slate-800">七、应急响应与监控预警</h2>
                    </div>
                    
                    <div class="mb-8">
                        <h3 class="text-xl font-semibold mb-4 text-slate-700 flex items-center">
                            <span class="w-4 h-4 bg-blue-500 rounded-full mr-2"></span>
                            3. 应急预案与演练
                        </h3>
                        <p class="text-slate-700 mb-4">
                            建立完善的应急响应机制。Java示例展示了系统过载保护的核心逻辑。
                        </p>
                        <div class="code-block rounded-lg overflow-hidden mb-4">
                            <div class="flex items-center bg-slate-800 px-4 py-2">
                                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                                <div class="text-slate-400 text-sm ml-2">SystemOverloadProtector.java</div>
                            </div>
                            <pre class="text-slate-200 p-4 overflow-x-auto"><code>// 系统过载保护示例
@Component
public class SystemOverloadProtector {
    private AtomicBoolean emergencyMode = new AtomicBoolean(false);
    
    @Scheduled(fixedRate = 5000)
    public void checkSystemLoad() {
        double cpuLoad = getSystemCpuLoad();
        long freeMemory = getSystemFreeMemory();
        
        if (cpuLoad > 0.9 || freeMemory < CRITICAL_MEMORY_THRESHOLD) {
            // 激活应急模式
            if (emergencyMode.compareAndSet(false, true)) {
                log.warn("System overload detected! Activating emergency mode");
                // 执行应急措施
                activateEmergencyMeasures();
            }
        } else if (emergencyMode.get() && cpuLoad < 0.7 && freeMemory > SAFE_MEMORY_THRESHOLD) {
            // 恢复正常模式
            if (emergencyMode.compareAndSet(true, false)) {
                log.info("System load normal. Deactivating emergency mode");
                // 恢复正常服务
                deactivateEmergencyMeasures();
            }
        }
    }
    
    private void activateEmergencyMeasures() {
        // 1. 拒绝非核心业务请求
        // 2. 降低缓存过期时间
        // 3. 启用更激进的限流策略
        // 4. 发送告警通知
    }
}</code></pre>
                        </div>
                        <div class="bg-amber-50 p-4 rounded-lg border-l-4 border-amber-400">
                            <h4 class="font-medium text-amber-800 mb-2 flex items-center">
                                <i class="fas fa-exclamation-triangle mr-2"></i>
                                应急响应关键步骤
                            </h4>
                            <ol class="text-sm text-amber-700 space-y-2 list-decimal list-inside">
                                <li>建立多级告警机制(监控系统 → 值班手机 → 短信/电话)</li>
                                <li>预先定义应急响应流程和责任人</li>
                                <li>定期进行故障演练和预案更新</li>
                                <li>确保关键操作有回滚方案</li>
                            </ol>
                        </div>
                    </div>
                </section>

                <!-- Conclusion -->
                <div class="bg-blue-50 rounded-xl p-8 border border-blue-200">
                    <div class="flex items-start">
                        <div class="flex-shrink-0 bg-blue-100 rounded-full p-3 mr-4">
                            <i class="fas fa-check-circle text-blue-600 text-2xl"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-blue-800 mb-3">百万QPS防护体系总结</h3>
                            <p class="text-blue-700 mb-4">
                                通过以上全面的防护策略，系统能够有效应对百万级QPS的冲击，保障核心业务的稳定运行。在实际应用中，需要根据业务特点和系统架构选择合适的防护措施，并不断优化和演进防护体系。防护不是一蹴而就的，而是需要持续改进的过程。
                            </p>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="bg-white p-4 rounded-lg border border-blue-100">
                                    <h4 class="font-semibold text-blue-700 mb-2 flex items-center">
                                        <i class="fas fa-layer-group text-blue-500 mr-2"></i>
                                        防护层级
                                    </h4>
                                    <ul class="text-sm text-blue-600 space-y-1">
                                        <li>前端防护</li>
                                        <li>网关防护</li>
                                        <li>应用防护</li>
                                        <li>缓存队列</li>
                                        <li>数据库防护</li>
                                    </ul>
                                </div>
                                <div class="bg-white p-4 rounded-lg border border-blue-100">
                                    <h4 class="font-semibold text-blue-700 mb-2 flex items-center">
                                        <i class="fas fa-tools text-blue-500 mr-2"></i>
                                        关键技术
                                    </h4>
                                    <ul class="text-sm text-blue-600 space-y-1">
                                        <li>限流熔断</li>
                                        <li>缓存削峰</li>
                                        <li>异步处理</li>
                                        <li>读写分离</li>
                                        <li>监控预警</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true
            }
        });
    </script>
</body>
</html>
```